<template>
  <base-panel-md class="home-stats-by-env" title="设备报警总览">
    <v-chart class="pie1" :options="option1" />
    <v-chart class="pie2" :options="option2" />
    <div class="filters">
      <base-btn @click="active = 0" :active="active === 0" class="filter">时间</base-btn>
      <base-btn @click="active = 1" :active="active === 1" class="filter">类型</base-btn>
      <base-btn @click="active = 2" :active="active === 2" class="filter">区域</base-btn>
    </div>

    <template #right-btn>
      <span class="more">报警量：20</span>
      <span class="time">处理量：20</span>
    </template>
  </base-panel-md>
</template>

<script>
import BasePanelMd from './BasePanelMd.vue';
import BaseBtn from './BaseBtn.vue';

const value = 85.23;

const val = value.toFixed(2).split('.')[0];
const vals = value.toFixed(2).split('.')[1];

export default {
  components: {
    BasePanelMd,
    BaseBtn,
  },

  data() {
    return {
      active: 0,
      option1: {
        title: [
          {
            text: '设备运行/离线比例',
            left: '10%',
            top: '79%',
            textStyle: {
              color: '#fff',
              fontSize: this.calcSize(13),
            },
          },
          {
            text: '{a|1789   }\n{b|   134}',
            left: 'center',
            top: 'center',
            textStyle: {
              // fontStyle: 'italic',
              rich: {
                a: { color: '#fff', fontSize: this.calcSize(18), fontStyle: 'italic' },
                b: { color: 'red', fontSize: this.calcSize(17), fontStyle: 'italic' },
              },
            },
          },
        ],
        series: [
          {
            type: 'pie',
            radius: ['50%', '63%'],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            zlevel: 1,
            label: {
              position: 'center',
            },
            data: [
              {
                value,
                name: '',
                itemStyle: {
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: '#8be75b', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#44e073', // 100% 处的颜色
                      },
                    ],
                  },
                },
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  color: '#ef3c60',
                },
              },
            ],
          },
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            zlevel: 0,
            // top: '-20%',
            label: {
              normal: {
                position: 'center',
              },
            },
            data: [
              {
                value,
                name: '',
                itemStyle: {
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: '#99e856', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#41e074', // 100% 处的颜色
                      },
                    ],
                  },
                },
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  show: false,
                },
                itemStyle: {
                  color: '#061740',
                  opacity: 0,
                },
              },
            ],
          },
        ],
      },
      option2: {
        title: [
          {
            text: `${val}`,
            x: '26%',
            y: 'center',
            textStyle: {
              fontSize: this.calcSize(18),
              color: '#29EEF3',
            },
          },
          {
            text: `.${vals}%`,
            x: '40%',
            y: 'center',
            textStyle: {
              fontSize: this.calcSize(16),
              color: '#29EEF3',
            },
          },
          {
            text: '设备总运行率',
            left: '18%',
            top: '79%',
            textStyle: {
              color: '#fff',
              fontSize: this.calcSize(13),
            },
          },
        ],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            label: false,
            data: [
              {
                value,
                name: '',
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#4FADFD', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#28E8FA', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#173164',
                  },
                },
              },
            ],
          },

          {
            type: 'gauge',
            radius: '73%',
            startAngle: 270,
            endAngle: -30,
            splitNumber: 7,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 1,
                color: '#293b68',
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            // data: [
            //   {
            //     value: 0,
            //     name: '',
            //   },
            // ],
          },
        ],
      },
    };
  },

  methods: {
    calcSize(num) {
      return (document.documentElement.clientWidth / 1920) * num;
    },
  },
};
</script>

<style lang="scss" scoped>
.home-stats-by-env {
  height: 25.278vh;
}

.pie1 {
  display: inline-block;
  width: 33.3%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 2vw;
}

.pie2 {
  display: inline-block;
  width: 33.3%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 38.3%;
}

.message {
  color: #fff;
  font-size: 0.781vw;
  line-height: 1.7;
  padding: 1px 0.8em 0 0.9em;
  min-width: calc(2.5em + 0.8em + 0.9em);
  text-align: center;
  background-size: 100% 100%;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 1.7vh;
}

.more {
  color: #47d3d7;
  margin-right: 1vw;
}

.time {
  color: #47d3d7;
  margin-right: 1.5vw;
}

.filters {
  position: absolute;
  right: 2vw;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.filter:not(:first-child) {
  margin-top: 1.8vh;
}
</style>
